<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语句的数据来源</title>

    <!-- 安装 Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 指定挂载位置 -->
    <div id="app"> </div>
    <!-- Vue 程序 -->
    <script>


        /*  
                模板语句的数据来源：
                1.谁可以给模板语句提供数据支持呢？data选项
                2.data选项的类型是什么？Object | Funcation (对象或函数)
                3.data配置项的专业叫法:Vue 实例的数据对象。(data实际上是给整个Vue实例提供数据来源的)
                4.如果data是对象的话，对象必须是纯粹的对象（含有0个活多个 key /value 对）
                5.data 数据如何插入到模板语句当中？
                    {{}} 这是 Vue 框架自己搞的一套语法，别的框架看不懂的，浏览器也是不能够识别的
                    Vue 框架自己是能够看懂的，这种语法在Vue框架中被称之为：模板语法中的插值语法，(有人
                    把她叫做胡子语法。)
                    怎么用？
                    {{data的key}}
         */


        new Vue({
            template: `<h1>最近非常火爆的电视剧{{  name   }},它的上映日期是{{relaeseTime}}
             ，主角是 {{lead.name}},年龄是{{lead.age}}
             其他演员包括: {{actors[0].name}}{{actors[0].age}}岁，{{actors[1].name}}{{actors[1].age}}岁。{{a.b.c.d.e.name}}
             </h1>`,
            data: {
                name: '狂飙',
                relaeseTime: '2023-1-1',
                lead: {
                    name: '高启强',
                    age: 39
                },
                actors: [
                    {
                        name: '安欣',
                        age: 39
                    },
                    {
                        name: '李华',
                        age: 18
                    }
                ],
                a: {
                    b: {
                        c: {
                            d: {
                                e: {
                                    name: 'hello'
                                }
                            }
                        }
                    }
                }
            }

        }).$mount('#app')
    </script>

</body>

</html>